<template>
  <div style="text-align: center; padding: 20px;">
    <!-- 欢迎语部分 -->
    <div class="welcome-section" style="margin-bottom: 30px;">
      <h1 style="font-size: 24px; font-weight: bold; margin-bottom: 10px;">
        欢迎您，<span style="color: #007BFF;">{{ user.name }}</span> 进入聚汇星超市管理系统！
      </h1>
      <p style="font-size: 16px; color: #555;">
        在这里您可以轻松管理商品、库存和销售信息。
      </p>
    </div>

    <!-- 图表部分 -->
    <div class="chart-section" style="display: flex; justify-content: center; align-items: center;">
      <div id="bie" style="width: 100%; height: 400px;"></div>
    </div>
  </div>
</template>

<script setup>
import request from "@/utils/request";
import * as echarts from "echarts";

// 获取用户信息
const user = JSON.parse(localStorage.getItem("user") || "{}");

// 使用 Vue 的 onMounted 生命周期钩子初始化图表
import {onMounted} from "vue";

onMounted(() => {
  const chartDom = document.getElementById("bie");
  if (chartDom) {
    const myChart = echarts.init(chartDom);

    const option = {
      title: {
        text: '本周热销产品',
        left: 'center', // 标题居中
        top: 'top', // 标题在顶部
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold',
          color: '#333'
        }
      },
      legend: {
        top: "bottom"
      },
      toolbox: {
        show: true,
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      series: [
        {
          name: "Nightingale Chart",
          type: "pie",
          radius: [30, 160],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 8
          },
          emphasis: {
            scale: true, // 鼠标悬停时放大
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          },
          label: {
            show: true,
            formatter: "{b}: {c} ({d}%)",
            fontSize: 12,
            fontWeight: "bold"
          },
          labelLine: {
            show: true,
            length: 20, // 线的长度
            length2: 20, // 连接线和文字的距离
            smooth: true
          },
          data: [
            {value: 40, name: "rose 1", selected: true},
            {value: 38, name: "rose 2"},
            {value: 32, name: "rose 3"},
            {value: 30, name: "rose 4"},
            {value: 28, name: "rose 5"},
            {value: 26, name: "rose 6"},
            {value: 22, name: "rose 7"},
            {value: 18, name: "rose 8"}
          ]
        }
      ]
    };

    myChart.setOption(option);

    window.addEventListener("resize", () => {
      myChart.resize();
    });
  }
});
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
}

.welcome-section {
  text-align: center;
}

.chart-section {
  margin-top: 20px;
}
</style>
